---
title: Guidelines
redirect_from:
  - /components/icon/
---

import { Close, Plus } from "@kiwicom/orbit-components/icons";

import IconHolder from "./IconHolder";
import IconList from "../../../../components/IconList";

import IconColorsSnippet from "snippets/icon-colors.mdx";

<ReactExample exampleId="Icon-default" />

## When to use

- To add simple visual context.
- To clarify the purpose of a feature or draw attention to a commonly understood action.
- With text so the context is [accessible to everyone](/foundation/accessibility/).

## When not to use

- For services such as payment methods---use a [service logo](/components/visuals/servicelogo/).
- For carriers for transport---use a [carrier logo](/components/visuals/carrierlogo/).
- For general visual context---use an [illustration](/components/visuals/illustration/).

## Component status

<ComponentStatus component="Icon" />

## Content structure

![Icon glyph: works best when accompanied by a clear label to improve usability.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:0%3A259)

## Content

### Use interactive icons for interactions

Some icons (like plus <IconHolder><Plus size="small" /></IconHolder>
and close <IconHolder><Close size="small" /></IconHolder>)
work well to show users that an interaction is possible (like adding an option or closing a dialog).
Users are used to interacting with these icons, so they work well inside buttons.

Don't use such icons in places where users can't interact with them.
This creates an expectation that clicking them does something,
which can lead to users being frustrated when nothing happens.

<GuidelineImages>

<DoImage>

![Radio buttons under the heading 'Select an option' with both icons related to baggage.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:143%3A1532)

Use non-interactive icons for settings other than interactions.

</DoImage>

<DontImage>

![Radio buttons under the heading 'Select an option' with the first icon being X and the second related to baggage.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:143%3A1473)

Using interactive icons creates the expectation that clicking the icon does something.

</DontImage>

</GuidelineImages>

### Use similar icons for lists

When creating lists and other repeated structures,
make sure to use icons that seem visually consistent.
For example, to show steps taken and not,
use check-circle and close-circle to present similar visual cues.

<GuidelineImages>

<DoImage>

![A list with three steps all with circled icons.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:144%3A1511)

Using consistent icons keeps it easy to scan.

</DoImage>

<DontImage>

![A list with three steps with 1 circled icon and 2 non-cicled icons.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:143%3A1473)

Varying the icons creates confusion about the message.

</DontImage>

</GuidelineImages>

### Use labels

Not everyone is able to see your carefully selected icon,
no matter how perfectly its shape matches its meaning.
Ensure everyone gets the same message by including a label with the icon.

The label should be short and match the meaning you want to convey with the icon.

You don't need labels when the icon is just visually supporting a message that exists in text.
In such cases, you should hide the icon from assistive technology.

See how it's done in React:

<ReactExample exampleId="Icon-accessibility" />

## Look & feel

### Match the color

<IconColorsSnippet />

<ReactExample exampleId="Icon-colors" />

## List of all icons

<IconList />
